<template>
  <div class="demo-container">
    <h2>高级图片裁剪示例</h2>
    <p class="description">支持多种形状裁剪，包括自由绘制</p>

    <div class="demo-row">
      <div class="demo-item">
        <h3>基础裁剪</h3>
        <div class="demo-content">
          <ImageCropper />
        </div>
      </div>

      <div class="demo-item">
        <h3>高级形状裁剪</h3>
        <div class="demo-content">
          <AdvancedImageCropper />
        </div>
      </div>
    </div>

    <div class="instructions">
      <h3>高级裁剪功能说明：</h3>
      <ol>
        <li><strong>矩形/圆形/椭圆：</strong>选择形状后，可以拖动裁剪框调整位置</li>
        <li><strong>三角形/星形/心形：</strong>预设的特殊形状，可以拖动调整位置和大小</li>
        <li><strong>自由绘制：</strong>按住鼠标左键，在画布上绘制任意封闭路径进行裁剪</li>
        <li><strong>重置裁剪：</strong>重新生成默认裁剪框</li>
        <li><strong>清空画布：</strong>清除当前绘制的路径</li>
        <li>右侧实时预览最终圆形显示效果</li>
      </ol>
    </div>
  </div>
</template>

<script setup>
import ImageCropper from '@/components/ImageCropper.vue';
import AdvancedImageCropper from '@/components/AdvancedImageCropper.vue';
</script>

<style scoped>
.demo-container {
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

h2 {
  color: #303133;
  margin-bottom: 10px;
  text-align: center;
}

.description {
  color: #606266;
  margin-bottom: 30px;
  text-align: center;
}

.demo-row {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
  flex-wrap: wrap;
  justify-content: center;
}

.demo-item {
  flex: 1;
  min-width: 300px;
  max-width: 500px;
}

.demo-item h3 {
  color: #606266;
  font-size: 16px;
  margin-bottom: 15px;
  text-align: center;
}

.demo-content {
  display: flex;
  justify-content: center;
  padding: 40px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.instructions {
  background-color: #ecf5ff;
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #409eff;
}

.instructions h3 {
  color: #409eff;
  margin-bottom: 15px;
  font-size: 16px;
}

.instructions ol {
  margin-left: 20px;
  color: #606266;
  line-height: 2;
}

.instructions li {
  margin-bottom: 10px;
}

.instructions strong {
  color: #409eff;
}
</style>
